﻿<template>
    <el-dialog title="质量申诉单" :close-on-click-modal="false" :visible.sync="visible" :append-to-body="true"
        class="SHZY-dialog SHZY-dialog_center" lock-scroll width="60%">
        <el-row :gutter="15" class="" :style="{ margin: '0 auto', width: '100%' }">
            <el-form ref="elForm" size="small" label-width="100px" label-position="left" :model="dataForm"
                :rules="rules">
                <el-col :span="8">
                    <el-form-item label="申诉部门" prop="appeaDepartId">


                        <el-select v-model='dataForm.appeaDepartId' placeholder='请选择' clearable
                            :style='{ "width": "100%" }'>
                            <el-option v-for="(item, index) in qualityDeptOptions" :key="index" :label="item.fullName"
                                :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="项目名称" prop="projectName">
                        <el-input v-model='dataForm.projectName' placeholder='请输入' clearable
                            :style='{ "width": "100%" }'>
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="申诉日期" prop="appeaDate">
                        <el-date-picker v-model='dataForm.appeaDate' placeholder='请选择' clearable
                            :style='{ "width": "100%" }' type='date' format='yyyy-MM-dd' value-format='timestamp'>
                        </el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="申诉单号" prop="appeaNo">
                        <el-input v-model='dataForm.appeaNo' placeholder='请输入' clearable :style='{ "width": "100%" }'>
                        </el-input>
                    </el-form-item>
                </el-col>


                <el-col :span="8">
                    <el-form-item label="物料号" prop="materialNo">
                        <el-input v-model='dataForm.materialNo' placeholder='请输入' clearable
                            :style='{ "width": "100%" }'>
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="物料名称" prop="materialName">
                        <el-input v-model='dataForm.materialName' placeholder='请输入' clearable
                            :style='{ "width": "100%" }'>
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="数量" prop="qty">
                        <el-input v-model='dataForm.qty' placeholder='请输入' clearable :style='{ "width": "100%" }'>
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="申诉人" prop="appealUserId">

                        <user-select v-model='dataForm.appealUserId' placeholder='请选择' clearable>
                        </user-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="审核人" prop="checkedUserId">

                        <user-select v-model='dataForm.checkedUserId' placeholder='请选择' clearable>
                        </user-select>
                    </el-form-item>
                </el-col>

                <el-col :span="24">
                    <el-form-item label-width="200" label="问题描述" prop="problemDescription">

                        <el-input v-model='dataForm.problemDescription' type="textarea" maxlength="500" show-word-limit
                            placeholder='请输入内容' clearable :style='{ "width": "100%" }' :rows="3">
                        </el-input>
                    </el-form-item>

                </el-col>
                <el-col :span="24">
                    <el-form-item label-width="200" label="申诉内容(原因描述)" prop="appealDescription">

                        <el-input v-model='dataForm.appealDescription' type="textarea" maxlength="500" show-word-limit
                            placeholder='请输入内容' clearable :style='{ "width": "100%" }' :rows="3">
                        </el-input>
                    </el-form-item>

                </el-col>
                <el-col :span="24">
                    <el-form-item label-width="200" label="举证材料：" prop="proofMaterials">

                        <el-input v-model='dataForm.proofMaterials' type="textarea" maxlength="500" show-word-limit
                            placeholder='请输入内容' clearable :style='{ "width": "100%" }' :rows="3">
                        </el-input>
                    </el-form-item>

                </el-col>

                <el-col :span="24">
                    <el-form-item label-width="200" label="备注内容：" prop="remark">

                        <el-input v-model='dataForm.remark' type="textarea" maxlength="500" show-word-limit
                            placeholder='请输入内容' clearable :style='{ "width": "100%" }' :rows="3">
                        </el-input>
                    </el-form-item>

                </el-col>
            </el-form>
        </el-row>

        <span slot="footer" class="dialog-footer">
            <el-button :loading="saveLoading" type="success" @click="dataFormSave()">保 存</el-button>
            <el-button :loading="btnLoading" type="primary" @click="dataFormSubmit()">确 定</el-button>
        </span>
    </el-dialog>
</template>

<script>
import { getOrganizeList } from '@/api/permission/organize'
import customerAPI from '@/api/q1/business/customer';
export default {
    data() {
        return {
            btnLoading: false,
            visible: false,
            saveLoading: false,

            createUser:"",
            dataForm:
            {

                id: undefined,
                CustomerId: undefined,
                appeaDepartId: undefined,
                projectName: undefined,
                appeaDate: undefined,
                appeaNo: undefined,
                materialNo: undefined,
                materialName: undefined,
                qty: undefined,
                appealUserId: undefined,
                checkedUserId: undefined,
                problemDescription: undefined,
                appealDescription: undefined,
                proofMaterials: undefined,
                remark: undefined,
                enabledMark: 1

            },
            rules: {
                appeaDepartId: [{ required: true, message: '请选择申诉部门', trigger: 'blur', },],
                appeaDate: [{ required: true, message: '请选择申诉日期', trigger: 'blur', },],
                appeaNo: [{ required: true, message: '请填写申诉单号', trigger: 'blur', },],
                materialNo: [{ required: true, message: '请填写物料号', trigger: 'blur', },],
                materialName: [{ required: true, message: '请填写物料名称', trigger: 'blur', },],
                qty: [{ required: true, message: '请填写数量', trigger: 'blur', }, { pattern: /(^[1-9](\d+)?(\.\d{1,2})?$)|(^\d\.\d{1,2}$)/, message: '请输入正确的数字', trigger: 'blur' },],
                appealUserId: [{ required: true, message: '请选择申诉人', trigger: 'blur', },],
                checkedUserId: [{ required: true, message: '请选择审核人', trigger: 'blur', },],
                problemDescription: [{ required: true, message: '请填写问题描述', trigger: 'blur', },],
                appealDescription: [{ required: true, message: '请填写申诉内容', trigger: 'blur', },],
                proofMaterials: [{ required: true, message: '请填写举证材料', trigger: 'blur', },],

            },
            qualityDeptOptions: [],


        }
    },
    created() {
        //获取部门
        getOrganizeList().then(res => {

            this.qualityDeptOptions = res.data.list[0].children;
        });
    },
    methods: {

        init(data) {


            this.visible = true
            this.$nextTick(() => {
                this.$refs['elForm'].resetFields();
                customerAPI.getqmsbusicustomerappeal(data.id).then(res => {
                    createUser = data.creatorUserId
                    this.dataForm = res.data
                    this.dataForm.CustomerId = data.id
                    this.dataForm.enabledMark = 1
                    if (!this.dataForm.appealUserId) {
                        this.dataForm.appealUserId = data.qualityResponsible
                    }
                    if (!this.dataForm.appeaDate) {
                        this.dataForm.appeaDate = Date.now()
                    }
                    //问题描述
                    if (!this.dataForm.problemDescription) {
                        this.dataForm.problemDescription = data.problemDescription
                    }
                    //申诉单号
                    if (!this.dataForm.appeaNo) {
                        this.dataForm.appeaNo = data.feedbackNo
                    }
                    //物料名称
                    if (!this.dataForm.materialName) {
                        this.dataForm.materialName = data.productName
                    }
                    //部门
                    if (!this.dataForm.appeaDepartId) {
                        this.dataForm.appeaDepartId = data.qualityDept
                    }

                })
            })
        },



        dataFormSubmit() {
            this.$refs['elForm'].validate((valid) => {
                if (valid) {
                    this.btnLoading = true
                    const formMethod = !this.dataForm.id ? customerAPI.qmsbusicustomerappeal : customerAPI.updateqmsbusicustomerappeal;
                    formMethod(this.dataForm).then((res) => {

                        let query={
                            formDataId:this.dataForm.id,
                            printConfigId:'573376979706308997',
                            formCustomerId:this.dataForm.CustomerId,
                            type:'Complaint',
                            title:"客诉-客户名称-质量申诉",
                            context:'请查阅附件，请审批',

                        }

                        if (res.code == 200) {
                            customerAPI.SubmitOA(query).then(res => {
                                this.btnLoading = false;
                                this.$message({
                                    message: res.msg,
                                    type: 'success',
                                    duration: 1000,
                                    onClose: () => {
                                        this.visible = false
                                        this.$emit('refresh', true)
                                    }
                                })


                            })
                        }
                    }).catch((res) => {
                        this.btnLoading = false;
                    })
                }
            });

        },

        //保存
        dataFormSave() {
            // this.$refs['elForm'].validate((valid) => {
            //     if (valid) {
            this.saveLoading = true
            const formMethod = !this.dataForm.id ? customerAPI.qmsbusicustomerappeal : customerAPI.updateqmsbusicustomerappeal;
            formMethod(this.dataForm).then((res) => {
                this.saveLoading = false;
                this.$message({
                    message: res.msg,
                    type: 'success',
                    duration: 1000,
                    onClose: () => {
                        this.visible = false
                        this.$emit('refresh', true)
                    }
                })
            }).catch((res) => {
                this.saveLoading = false;
            })
            //     }
            // });

        }
    }
}
</script>